<template>
  <!--
此组件用于判断是否需要使用tooltips功能
即当内容长度溢出时启用tooltips功能,没溢出时不启用
-->
  <div class="text-tooltip">
    <el-tooltip
      class="item"
      :effect="effect ? effect : 'dark'"
      :disabled="isShowTooltip"
      :content="content"
      :placement="placement ? placement : 'bottom'"
    >
      <p class="text-ellipsis" ref="parentRef" @mouseover="onMouseOver()">
        <span
          ref="contentRef"
          :style="{
            'font-size': size ? size : '',
            color: color ? color : '',
            'line-height': lineHeight ? lineHeight : '',
            'font-weight': fontWeight ? fontWeight : ''
          }"
        >
          {{ content || "-" }}
        </span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch, onMounted, onUpdated } from "vue";
export default {
  name: "textTooltip",
  props: {
    // 显示的文字内容
    content: {
      type: String,
      default: () => {
        return "";
      }
    },
    size: String,
    color: String,
    lineHeight: String,
    fontWeight: String,
    placement: String,
    effect: String
    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
    // className: {
    //   type: String,
    //   default: () => {
    //     return "";
    //   }
    // }
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    // refName: {
    //   type: String,
    //   default: () => {
    //     return "";
    //   }
    // }
  },
  setup(props, context) {
    // const tamp=props.refName+'Ref'
    const parentRef = ref(null);
    const contentRef = ref(null);
    const isShowTooltip = ref(true); //是否显示tooltip
    const onMouseOver = (str) => {
      let parentWidth = parentRef.value.parentNode.offsetWidth;
      let contentWidth = contentRef.value.offsetWidth;
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        isShowTooltip.value = false;
      } else {
        isShowTooltip.value = true;
      }
    };

    return {
      parentRef,
      contentRef,
      isShowTooltip,
      onMouseOver
    };
  }
};
</script>

<style lang="scss" scoped>
.text-tooltip {
  flex: 1;
  overflow: hidden;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666666;
}
// .multiline {
//   line-height: 24px;
//   text-align: justify;
// }
</style>
